<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:c="http://www.w3.org/1999/xhtml">
<head>
    <title>新型冠状肺炎实时数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- <link href="https://unpkg.com/bootstrap-table@1.13.4/dist/bootstrap-table.min.css" rel="stylesheet">-->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

</head>
<body>
<!--<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>-->

<div  style="width: 3000px; font-size: 30px; background: #8080806b;margin: auto; margin-top: 50px; height: 250px; border-radius: 9px;float: left;">
    <p style="margin-left: 30px;">截至今天的全球冠状病毒患者数</p>
    <p style="margin-left: 30px">全球总确诊人数：<span th:text="${sum}"> </span></p>
    <p style="margin-left: 30px">当前时间：<span th:text="${nowTime}"> </span></p>
    <p style="margin-left: 30px">全球总新增确诊人数：<span th:text="${differ}"> </span></p>
</div>
<form action="/query">
<div style="width: 90%;">
    <div class="form-group" style="width: 11%; ">
        <input style="font-size: 30px;float: right "  class="form-control"  name="country" placeholder="输入要查找的国家 " >
        <button style="font-size: 30px; position:relative;top:-54px ;left: 320px" type="submit">查找</button>
    </div>
</div>
</form>
<table class="table table-striped table-bordered table-hover ">
    <thead>
    <tr>
        <th >地方</th>
        <th >国家</th>
        <th >确诊总人数</th>
        <th>对比上一天增加人数</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="data: ${item}">
        <td th:text="${data.state}"></td>
        <td th:text="${data.country}"></td>
        <td th:text="${data.latestTotalCases}"></td>
        <td th:text="${data.diffFromPrevDay}"></td>
    </tr>
    </tbody>
</table>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>